<template>
<div >
   <ylheader :leftsvg='true' :title="title" ></ylheader>
    <rotaoteend v-if="status==2"/>
  <div class="loadmore-container" ref="squarerotateWrapper" v-else>
    <div class="loadmore-ul">
      <div class="container">
        <div class="lucky-wheel">
          <div class="wheel-main a-c">
              <div class="wheel-bg">
                <div class="lvb-f h-c">
                  <div class="a-c">
                    <img src="~img/chou-lvb.png" class="chou-icon">
                    <span><span class="lvb-num">{{coininfo.cost}}</span>绿币/次</span>
                    <span>&nbsp;&nbsp;当前绿币：<span class="lvb-num">{{coininfo.userCoin}}</span></span>
                  </div>
                </div>
                <lottery :beforeLottery="beforeLottery"  :prizesList="prizesList" :prize="prize" :afterLottery="afterLottery" :ischouclick="ischouclick"></lottery>
              </div>
          </div>
          <div class="rt-r-fa">
              <div  @click="gorecode">
                <img src="~img/chou-jilu.png" >
              </div>
              <div  @click="gourl">
                  <img src="~img/chou-guize.png" >
              </div>
          </div>
          <rotateuser :headline="headline"></rotateuser>
        </div>
      </div>
      <rotatepop :prizeName="prizeinfo.prizeName" :prizeType="prizeinfo.prizeType" :ispopshow="ispopshow" @ispopshow="confirmpop"></rotatepop>
    </div>
  </div> 
</div>
</template>
<script>
import api from "src/api/index";
import lottery from "src/components/rotate/lottery.vue";
import rtheader from "src/components/rotate/rt-header.vue";
import rotatepop from "src/components/rotate/rotatepop.vue";
import rotateuser from "src/components/rotate/rotateuser.vue";
import rotaoteend from "src/components/rotate/rotate-end.vue";
export default {
  name:"squarerotate",
  data() {
    return {
      coininfo:{},
      prizeinfo:{},
      repeat:"",//可重复次数
      restChance:"",//剩余抽奖次数
      ischouclick:false,
      headline:[],
      ispopshow:false,
      prize:0,
      prizesList:[],
      status:"",
      title:""
    };
  },
  components: {
    rtheader,
    api,
    rotatepop,
    rotateuser,
    lottery,
    rotaoteend
  },

  mounted() {
    this.getdraw()
  },
  methods: {
    init(){
      this.drawrecord()
          .then(data=>{
            this.initScroll();
          }).then(data => {
            this.$nextTick(() => {
                setTimeout(() => {
                  this.myscroll.refresh();
                }, 100);
              })
          });
      },
    getdraw(){
       let p = new Promise((resolve, reject) => {
         api.getdraw({drawId:this.$route.query.drawId}).then(res=>{
             if(res.success){
                  this.status=res.data.status
                  if(this.status==2){
                    this.title="抱歉"
                  }else{
                    this.init()
                    this.title="抽奖"
                  }
                 this.prizesList = res.data.prizeList;
                 this.coininfo.cost = res.data.cost;
                 this.coininfo.userCoin = res.userCoin;
                 this.restChance = res.restChance;
                 this.repeat = res.data.repeat;
             }
              resolve("获取抽奖信息....");
         })
       });
       return p;
    },
    drawrecord(){
          let p = new Promise((resolve, reject) => {
            api.drawrecord({drawId:this.$route.query.drawId}).then(res=>{
                if(res.success){
                    this.headline = res.data;
                }
                 resolve("获取抽奖轮播记录....");
            })
          });
          return p;
    },
    confirmpop(data){
      this.ispopshow=!this.ispopshow;
      if(this.prizeinfo.prizeType==1){//快递实物
         this.$router.push({path:"/address",query:{tag:1,id:this.prizeinfo.recordId}});
      }else if(this.prizeinfo.prizeType==2){//红包
         this.$router.push({path:"/submitresult",query:{tag:1,prizeName:this.prizeinfo.prizeName}});
      }else if(this.prizeinfo.prizeType==3){//自取实物
         this.$router.push({path:"/shipaddress",query:{id:this.prizeinfo.recordId,tag:0,typeValue:this.prizeinfo.typeValue}});
      }else if(this.prizeinfo.prizeType==4){//绿币
         this.$router.push({path:"/submitresult",query:{tag:2,prizeName:this.prizeinfo.prizeName}});
      } 
    },
    beforeLottery(resolve,reject){
          /*
          * send ajax to get result and pass to child component
          **/ 
          // get result : this.prize
          if(this.coininfo.userCoin>=this.coininfo.cost){
            if(this.repeat==null||(this.repeat!=null&&this.restChance>0)){
              this.golottery(resolve);
            }else{
              this.$toast("对不起，您抽奖次数已达到上限啦");
            }
          }else{
              this.$toast("绿币不足");
          }
    },
    afterLottery(){
      this.ischouclick=false;
      this.ispopshow=true;
    },
    golottery(resolve){
        api.golottery({drawId:this.$route.query.drawId}).then(res=>{
          if(res.success){
            this.$util.saveFootPrint({actType:17,typeValue:this.$route.query.drawId});//用户轨迹
            this.restChance--;
            this.coininfo.userCoin-=this.coininfo.cost;;
            this.ischouclick=true;
            this.prize=res.result.code;
            if(res.result.code<2){
              this.prize=res.result.code+7;
            }else{
              this.prize=res.result.code-1;
            }
            this.prizeinfo = res.result;
            resolve();
          }else{
            this.$toast(res.msg);
          }
        })
    },
    gourl(){
      this.$router.push({path:"/activityrule",query:{drawId:this.$route.query.drawId,tag:3}});
    },
    gorecode(){
      this.$router.push({path:"/exchangerecode",query:{drawId:this.$route.query.drawId,tag:0}});
    },
        //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let squarerotateWrapper = this.$refs.squarerotateWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(squarerotateWrapper, {
            preventDefault: false,
            onScrollMove: function() {
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (localStorage.tempPageHeight != document.getElementsByClassName("loadmore-ul")[0].scrollHeight) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName("loadmore-ul")[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
  },
};
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  overflow: hidden;
}
.lucky-wheel {
  width: 100%;
  height: 12.4rem;
  background: rgb(74,47,127) url("https://youlingqinius.wonderlandnet.cn/chou-title.png?v=1.1") no-repeat;
  background-size: 100%;
  padding-top: 2.45rem;
}
.wheel-main{
  position: relative;
}
.wheel-bg {
  position: relative;
  width: 6.51rem;
  height: 6.98rem;
  background: url("https://youlingqinius.wonderlandnet.cn/9-box.png") no-repeat center top;
  background-size: 100%;
  color: #fff;
  font-weight: 500;
  flex-direction: column;
  transition: transform 3s ease;
}
.lvb-f{
    height: 0.82rem;
  .lvb-t{
    width: 4.5rem;
  }
  .lvb-num{
    font-size: 0.25rem;
    color: #fdd83f;
  }
}
.chou-icon{
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.1rem;
}

</style>


